<template>
 <div>
   <el-form :model="resident" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
     <el-form-item label="用户名" prop="pass">
       <el-input type="text" v-model="username" autocomplete="off" :placeholder="message" @blur="handleInput"></el-input>
     </el-form-item>
     <el-form-item label="密　码" prop="checkPass">
       <el-input type="password" v-model="resident.password" autocomplete="off" placeholder="请输入密码"></el-input>
     </el-form-item>
     <el-switch
         v-model="value"
         active-color="#13ce66"
         inactive-color="#ff4949">
     </el-switch>&nbsp;
     <span>30天免登录</span>
     <el-form-item>
       <el-button type="primary" @click="dialogVisible=true">登录</el-button>&nbsp;
     </el-form-item>
   </el-form>
   <router-link to="/web/forget">忘记密码?</router-link>
   <el-dialog
       title="旋转图片验证"
       :visible.sync="dialogVisible"
       width="50%"
       @close="dialogVisible = false"
   >
     <div class="container">
       <div class="image-wrapper">
         <div class="image-box" :style="{
        transform: `rotate(${rotateDegrees}deg)`,
        background: `url(${imageSrc}) no-repeat center / 100% auto`,
    }"></div>
         <input type="range" min="0" max="360" v-model="rotationValue" @mouseup="checkRotation" @touchend="checkRotation">
       </div>
       <div class="message" v-if="showMessage">{{ mes}}</div>
       <div class="degree-info">当前图片度数: {{ rotateDegrees }}</div>
       <div class="degree-info">初始化图片度数: {{ firstRotateDegrees }}</div>
       <div class="degree-info">当前滚动条度数: {{ rotationValue }}</div>
     </div>
     <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
   </el-dialog>
 </div>
</template>

<script>
// import { Button, Dialog } from 'element-ui';
export default {
  name: "LoginWithUsername",
  // comments:{
  //   [Button.name]: Button,
  //   [Dialog.name]: Dialog
  // },
  data() {
    return {
      resident: {
        email: null,
        phone1:'',
        password: ''
      },
      isLogin:false,
      phone:'',
      username: '',
      value: false,
      message: '手机号/邮箱',
      dialogVisible: false,
      rotateDegrees: 0, // 随机旋转角度
      firstRotateDegrees: Math.floor(Math.random() * 360), // 随机旋转角度
      rotationValue:0,
      showMessage: false,
      mes: '',
      imageSrc: 'https://img2.baidu.com/it/u=3344911223,3409692090&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313'
  };
  },
  methods: {
    submitForm() {
      if (this.isLogin==true){
        if (this.resident.phone1=='') {
          console.log("dianhua:"+this.resident.phone1)
          // console.log("邮箱"+this.resident.email)
          this.$message.error('未输入用户名');
          return false;
        }
        if (this.resident.password == '') {
          this.$message.error('未输入密码');
          return false;
        }
        this.$axios.post("/web/login", this.resident, {params: {value: this.value}})
            .then(response => {
              if (response.data.code == 10001) {
                this.$message.error("用户名或者密码错误，请重新登录");
              } else {
                console.log(response.data);
                window.localStorage.setItem("webToken", response.data.webToken);
                window.localStorage.setItem("resident", JSON.stringify(response.data.resident));
                console.log(localStorage.getItem("webToken"))
                this.$router.push("/");
              }
            });
      }
      else{

      }
    },
    handleInput() {
      if (/^1[3456789]\d{9}$/.test(this.username)) {
        this.resident.phone1 = this.username;
      }
      if (/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])/.test(this.username)) {
        this.resident.email = this.username;
      }
    },
    checkRotation() {
      if( Math.abs(360 - (this.rotateDegrees)) <= 10) {

        this.mes = '验证成功';
        //隐藏验证窗口
        this.dialogVisible=false;
        //去登陆
        this.isLogin=true;
        this.submitForm();
      } else {
        this.mes = '验证失败';
        this.isLogin=false;
      }
      this.showMessage = true;
      this.rotationValue = 0;
      setTimeout(() => {
        this.firstRotateDegrees = Math.floor(Math.random() * 360);
        this.rotateDegrees = this.firstRotateDegrees;
        this.showMessage = false;
      }, 2000);

    },
    slideEvent(){
    },
  },
  created() {
    this.rotateDegrees = this.firstRotateDegrees;
  },
  watch: {
    rotationValue(newVal,oldVal) {
      if (!this.showMessage){
        this.rotateDegrees = this.rotateDegrees + (newVal-oldVal);
      }
    },
  }
}
</script>

<style scoped>

.container {
  width: 200px;
  height: 300px;
  text-align: center;
}

.image-wrapper {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.image-box {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 180px;
  height: 180px;

}

.rotation-control {
  width: 90%;
  margin-top: 20px;
}

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message {
  margin-top: 20px;
  padding: 10px;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
}
</style>